<template>
	<div id="content">
		<Header />
		<div class="index">
			<div class="tips">
				<div class="cont w1200">
					<div class="left">
						<img src="../../../assets/img/hi-icon.png" alt="">
						欢迎访问武汉市东西湖区人民代表大会常务委员会！
					</div>
					<div class="right">
						<img src="../../../assets/img/time.png" alt=""><span>{{ CurrentDate.date }}</span><span>{{
							CurrentDate.dayOfWeek }}</span>
					</div>
				</div>
			</div>
			<div class="notice">
				<div class="cont w1200">
					<div class="left">
						通知<br>
						公告
					</div>
					<div class="right" v-if="notice">
						<a class="title" @click="goNews(notice.category)">{{ notice.title }}</a>
						<div class="detail">
							<div class="txt">
								<span v-html="notice.articlesDb"></span>
							</div>
							<div class="time"><span>|</span>{{ notice.publishTime }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="part1">
				<div class="cont w1200">
					<div class="left">
						<div class="tab-bar">
							<div class="tab" :class="{ 'active': item.checked }" v-for="item in TabList"
								@click="goTabItem(item.id)" v-if="item.isShow == '1'">{{ item.name }}</div>
						</div>
						<div class="list">
							<a class="item" v-for="item in newsList" @click="goNews(item.category)">
								<div class="tit">
									<div class="text">{{ item.title }}</div>
									<div class="time">{{ item.publishTime }}</div>
								</div>
								<div class="detail">
									{{ item.articlesDb }}
								</div>
							</a>
						</div>
					</div>
					<div class="right">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<swiper :options="swiperOption" ref="mySwiper">
									<swiper-slide class="swiper-slide"   v-for="item in newsList" ><img :src="item.thumbnailUrl" alt="">
										<p>{{ item.title }}</p>
									</swiper-slide>
									<div class="swiper-pagination" slot="pagination"></div>
								</swiper>
							</div>
							<div ref="paginationBullets" class="swiper-pagination" slot="pagination"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="part2">
				<div class="cont w1200">
					<div class="situation">
						<div class="title">
							<span>人大</span>概况
						</div>
						<div class="list">
							<a class="item" @click="goCloumn('41')">
								<img src="../../../assets/img/situation1.png" alt="">
								<img src="../../../assets/img/situation1-hover.png" alt="">
								常委会公报
							</a>
							<a class="item" @click="goSituation('12')">
								<img src="../../../assets/img/situation2.png" alt="">
								<img src="../../../assets/img/situation2-hover.png" alt="">
								制度建设
							</a>
							<a class="item" @click="goNet()">
								<img src="../../../assets/img/situation3.png" alt="">
								<img src="../../../assets/img/situation3-hover.png" alt="">
								人大代表联络站
							</a>
							<a class="item" @click="goSituation('14')">
								<img src="../../../assets/img/situation4.png" alt="">
								<img src="../../../assets/img/situation4-hover.png" alt="">
								人事任免
							</a>
							<a class="item" @click="goSituation('19')">
								<img src="../../../assets/img/situation5.png" alt="">
								<img src="../../../assets/img/situation5-hover.png" alt="">
								职能介绍
							</a>
							<a class="item" @click="goSituation('15')">
								<img src="../../../assets/img/situation6.png" alt="">
								<img src="../../../assets/img/situation6-hover.png" alt="">
								资料库
							</a>
						</div>
					</div>
					<div class="cloumn">
						<div class="title">
							<span>专题</span>专栏
						</div>
						<div class="list">
							<a class="item" @click="goCloumn('42')">
								<img src="../../../assets/img/cloumn1.png" alt="">人代会专题
							</a>
							<a class="item" @click="goCloumn('44')">
								<img src="../../../assets/img/cloumn2.png" alt="">代表“三进”
							</a>
							<a class="item" @click="goCloumn('43')">
								<img src="../../../assets/img/cloumn3.png" alt="">议案建议
							</a>
						</div>
					</div>
					<div class="interaction">
						<div class="title">
							<span>工作</span>动态
						</div>
						<div class="list">
							<a class="item" @click="goNews('16')">
								<img src="../../../assets/img/interaction1.png" alt="">工作动态
							</a>
							<a class="item" @click="goNews('17')">
								<img src="../../../assets/img/interaction2.png" alt="">街道人大动态
							</a>
							<a class="item" @click="goNews('40')">
								<img src="../../../assets/img/interaction3.png" alt="">通知公告
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="part3">
				<div class="cont w1200">
					<div class="left">
						网谷里面对面
						<a> <router-link to="/portal/net">查看详情</router-link></a>
					</div>
					<div class="right">
						<a @click="goCloumn('')">“三公”经费预决算信息</a>
						<a @click="goCloumn('42')">人代会专题</a>
					</div>
				</div>
			</div>
			<div class="part4">
				<div class="cont w1200">
					<div class="news">
						<div class="tab-bar">
							<div class="tab active">决定决议</div>
							<a class="more" @click="goNews(4)">更多</a>
						</div>
						<div class="list">
							<a class="item" v-for="item in decisions" @click="goNews(item.category)">
								<div class="tit">
									<div class="text">{{ item.title }}</div>
									<div class="time">{{ item.publishTime }}</div>
								</div>
								<div class="detail">
									<span v-html="item.articlesDb"></span>
								</div>
							</a>
						</div>
					</div>
					<div class="news">
						<div class="tab-bar">
							<div class="tab" :class="{ 'active': item.checked }" v-for="item in TabList1"
								@click="goTabItem2(item.id)" v-if="item.isShow == '1'">{{ item.name }}</div>
							<a class="more" @click="goNews(4)">更多</a>
						</div>
						<div class="list">
							<a class="item" v-for="item in newsList1" @click="goNews(item.category)">
								<div class="tit">
									<div class="text">{{ item.title }}</div>
									<div class="time">{{ item.publishTime }}</div>
								</div>
								<div class="detail">
									<span v-html="item.articlesDb"></span>
								</div>
							</a>
						</div>
					</div>

					<div class="news">
						<div class="tab-bar">
							<div class="tab" :class="{ 'active': item.checked }" v-for="item in TabList2"
								@click="goTabItem3(item.id)">{{ item.name }}</div>
							<a class="more" @click="goCloumn(5)">更多</a>
						</div>
						<div class="list">
							<a class="item" v-for="item in newsList2" @click="goCloumn(item.category)">
								<div class="tit">
									<div class="text">{{ item.title }}</div>
									<div class="time">{{ item.publishTime }}</div>
								</div>
								<div class="detail">
									<span v-html="item.articlesDb"></span>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Contact />
		<div class="fixed" @click="goTop">
			<div class="cont">
				<div class="wechat">
					<img src="../../../assets/img/wechat.png" alt="">
					微信
					<div class="hover">
						<img src="../../../assets/img/qrcode.png" alt="">
					</div>
				</div>
				<div class="top">
					<img src="../../../assets/img/top.png" alt="">
					顶部
				</div>
			</div>
		</div>
	</div>

</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import Header from '@/components/Header';
import Contact from '@/components/Contact';
import { getDate, getPageData, getArticleDetail } from "@/api/website";


export default {
	data() {
		return {
			CurrentDate: [],
			TabList: [],
			TabList1: [],
			TabList2: [],
			decisions: [],
			newsList: [],
			newsList1: [],
			newsList2: [],
			notice: {},
			swiperOption: {
				loop: true,
				observer: true,//修改swiper自己或子元素时，自动初始化swiper
				observeParents: true,//修改swiper的父元素时，自动初始化swiper
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false
				},
				// 显示分页
				pagination: {
					el: ".swiper-pagination",
					clickable: true //允许分页点击跳转
				},
				// 设置点击箭头
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev"
				}
			}
		}
	},
	components: {
		Header,
		Contact,
		swiper,
		swiperSlide
	},
	created() {
		this.init();
	},
	mounted() {

	},
	methods: {
		goTop() {
			let top = document.documentElement.scrollTop || document.body.scrollTop;
			// 实现滚动效果
			const timeTop = setInterval(() => {
				document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
				if (top <= 0) {
					clearInterval(timeTop);
				}
			}, 10);
		},
		init() {
			this.loading = true;
			//日期
			getDate().then(response => {
				this.CurrentDate = response.data
			});
			//工作动态 街道人大动态 标题
			getPageData({ id: 4 }).then(response => {
				this.TabList = response.data.childrenCategory;
				this.TabList[0].checked = true;
				this.getnewsList(this.TabList[0].id)
			});
			//通知公告
			getArticleDetail({ id: 40 }).then(response => {
				this.notice = response.rows[0];
				this.notice.articlesDb = this.notice.articlesDb.replace(/[^\u4e00-\u9fa5_0-9]/g, '')
			});
			//决定决议
			getArticleDetail({ id: 45 }).then(response => {
				this.decisions = response.rows;
				for (const key in this.decisions) {
					this.decisions[key].articlesDb = this.decisions[key].articlesDb.replace(/[^\u4e00-\u9fa5]/g, '')
				}
			});
			//党建工作 乡村振兴 标题
			getPageData({ id: 46 }).then(response => {
				this.TabList1 = response.data.childrenCategory;
				this.TabList1[0].checked = true;
				this.getnewsList1(this.TabList1[0].id)
			});
			//常委会专题 人代会专题 标题
			getPageData({ id: 5 }).then(response => {
				this.TabList2 = response.data.childrenCategory.slice(0, 2);
				this.TabList2[0].checked = true;
				this.getnewsList2(this.TabList2[0].id)
			});
		},
		//工作动态 街道人大动态
		getnewsList(id) {
			getArticleDetail({ id: id }).then(response => {
				this.newsList = response.rows.slice(0, 3);
				for (const key in this.newsList) {
					this.newsList[key].articlesDb = this.newsList[key].articlesDb.replace(/[^\u4e00-\u9fa5]/g, '')
				}
			});
		},
		//党建 乡村振兴
		getnewsList1(id) {
			getArticleDetail({ id: id }).then(response => {
				this.newsList1 = response.rows;
				for (const key in this.newsList1) {
					this.newsList1[key].articlesDb = this.newsList1[key].articlesDb.replace(/[^\u4e00-\u9fa5]/g, '')
				}
			});
		},
		//常委会专题 人代会专题
		getnewsList2(id) {
			getArticleDetail({ id: id }).then(response => {
				this.newsList2 = response.rows;
				for (const key in this.newsList2) {
					this.newsList2[key].articlesDb = this.newsList1[key].articlesDb.replace(/[^\u4e00-\u9fa5]/g, '')
				}
			});
		},
		goTabItem(id) {
			for (const key in this.TabList) {
				if (this.TabList[key].id == id) {
					this.TabList[key].checked = true;
				} else {
					this.TabList[key].checked = false;
				}
			}
			this.getnewsList(id)
		},
		goTabItem2(id) {
			for (const key in this.TabList1) {
				if (this.TabList1[key].id == id) {
					this.TabList1[key].checked = true;
				} else {
					this.TabList1[key].checked = false;
				}
			}
			this.getnewsList1(id)
		},
		goTabItem3(id) {
			for (const key in this.TabLis3) {
				if (this.TabLis3[key].id == id) {
					this.TabLis3[key].checked = true;
				} else {
					this.TabLis3[key].checked = false;
				}
			}
			this.getnewsList2(id)
		},
		goNews(id) {
			this.$router.push({ path: '/portal/news', query: { id: id } })
		},
		goCloumn(id) {
			this.$router.push({ path: '/portal/cloumn', query: { id: id } })
		},
		goSituation(id) {
			this.$router.push({ path: '/portal/situation', query: { id: id } })
		},
		goNet() {
			this.$router.push({ path: '/portal/net/site' })
		}
	}
};
</script>

<style scoped lang="scss"></style>
